/*
	jGrouse framework
	Copyright 2007 by Denis Riabtchik 
	All rights reserved.
	
	Licensed under modified BSD license. See license.txt for details
*/

/**
	Module with most commonly used spices
	@module jgrouse.widgets.spices.Spices
	@requires jgrouse.widgets.Widget
*/

jgrouse.module({
	name : 'jgrouse.widgets.spices.Spices',
	requires : ['jgrouse.widgets.Widget'],
	imports : ['jgrouse.string.*', 'jgrouse.dom.Element', 'jgrouse.dom.Event'],
	body : function(embed)
	{
		eval(embed);
		
		/**
			Spice imlementing "hover" effect by adding or removing certain class from widget/DOM node.
			This spice is being registered under <b>rollover</b> alias.
			@class jgrouse.widgets.spices.Rollover
			@extends jgrouse.widgets.Spice
		*/
		jgrouse.widgets.registerSpice('rollover', 'jgrouse.widgets.spices.Rollover');	
		jgrouse.define('jgrouse.widgets.spices.Rollover', 'jgrouse.widgets.Spice', function(embed)
		{
			eval(embed);
			
			return {
				/**
					@constructor initialize
					@inheritdesc
				*/
				initialize : function(widget)
				{
					_sup(this, arguments);
					this._mouseOverHandler = jgrouse.bindAsEventListener(this, this._mouseOver);
					this._mouseOutHandler = jgrouse.bindAsEventListener(this, this._mouseOut);
					/**
						Flag checking if the mouse is currently over the element
						@variable {boolean} _isMouseOver
					*/
					this._isMouseOver = false;
					/**
						Name of CSS class name that is used to implement rollover
						@variable {String} _className
					*/
					this._className = null;
				},
				
				/**
					Sets the name of CSS class that should be added to widget/dom when mouse is hovering over
					@function setClassName
					@param {String} className - name of CSS class that should be used for hovering
				*/
				setClassName : function(className)
				{
					this._className = className;
				},
				
				/**
					@function render
					@inheritdesc
				*/
				render : function()
				{
					var element = this.getNode();
					if (!element)
					{
						element = this.getWidget().getDomElement();
					}
					Event.addListener(element, 'mouseover', this._mouseOverHandler, true);
					Event.addListener(element, 'mouseout', this._mouseOutHandler, true);
				},
				
				/**
					@function dispose
					@inheritdesc
				*/
				dispose : function()
				{
					var element = this.getNode();
					if (!element)
					{
						element = this.getWidget()._domElement;
					}
					if (element)
					{
						Event.removeListener(element, 'mouseover', this._mouseOverHandler, true);
						Event.removeListener(element, 'mouseout', this._mouseOutHandler, true);
					}
				},
				
				_mouseOut : function(event)
				{
					this._isMouseOver = false;
					if (this._className)
					{
						this.removeClassName(this._className);
					}
				},
				
				_mouseOver : function(event)
				{
					if (!this._isMouseOver && this._className)
					{
						this._isMouseOver = true;
						this.addClassName(this._className);
					}
				}
			}
		});
		
		jgrouse.widgets.registerSpice('highlight', 'jgrouse.widgets.spices.Highlight');
		jgrouse.define('jgrouse.widgets.spices.Highlight', 'jgrouse.widgets.Spice', function(embed)
		{
			eval(embed);
			
			return {
				initialize : function(widget)
				{
					_sup(this, arguments);
					this._state = false;
					this._className = null;
				},
				
				setState : function(value)
				{
					var oldValue = this._state;
					this._state = value;
					if (this._className && (oldValue != value))
					{
						if (value)
						{
							this.addClassName(this._className);
						}
						else
						{
							this.removeClassName(this._className);
						}
					}
				},
				
				setClassName : function(value)
				{
					this._className = value;
				}
			}
		});
		
	}
});
